<template>
  <div 
    class="lyf-icon"
    :class="'lyf-icon-' + name"
    v-if="base64Data" 
    :style="{
      width: size + 'px',
      height: size + 'px'
    }"
  >
    <img :style="{
      width: size + 'px',
      height: size + 'px',
      filter: `drop-shadow(${color} ${size}px 0)`
    }" :src="base64Data" alt="" />
  </div>
</template>

<script>
import base64Data from '@/assets/localData/base64'

export default {
  name: 'LyfIcon',
  props: {
    name: { type: String, required: true },
    color: { type: String, default: '#fff'},
    size: { type: [String, Number], default: 20},
  },
  computed: {
    // 这种方式，需要将svg图片上传到服务器，使用绝对地址
    // icon() {
    //   let svg
    //   try {
    //     svg = require(`../../assets/icon/${this.name}.svg`)
    //   } catch (error) {}
    //   return svg
    // },
    // 待优化，目前是手动转换成base64保存在本地
    base64Data() {
      return base64Data[this.name]
    }
  }
}
</script>

<style scoped>
.lyf-icon {
  overflow: hidden;
}
.lyf-icon img {
  transform: translateX(-100%);
}
</style>
